<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Short URL Demo</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/js-base64@3.6.1/base64.min.js"></script>
</head>

<body>
    <input type="text" id="url">
    <button onclick="checkButtonClick()">Check</button>
    <button onclick="submit()">Submit</button>
    <button onclick="go()">Run</button>
    <div>Shortened Result:&nbsp;<input disabled type="text" id="shortened"></div>
    <div>Get:&nbsp;<input disabled type="text" id="get"></div>
    <div>Set:&nbsp;<input disabled type="text" id="set"></input></div>
    <div>Last Get moment:&nbsp;<input disabled type="text" id="getMoment"></input>seconds ago</div>
    <div>Last Set moment:&nbsp;<input disabled type="text" id="setMoment"></input>seconds ago</div>
</body>

</html>
<script type="text/javascript">

    function go() {
        for (let index = 0; index < 100; index++) {
            $.ajax({
                url: "http://localhost/s",
                beforeSend: req => {
                    req.setRequestHeader('Authorization', basicAuth('admin', 'password'));
                },
                data: $('#url').val(),
                type: "POST",
                contentType: "application/json;charset=UTF-8"
            }).done(res => {
                console.log(res);
                $('#shortened').val(res);

            }).fail(errorRes => {
                console.error(errorRes);
            });
        }
    }

    function checkButtonClick() {
        $.ajax({
            url: "http://localhost/counter",
            beforeSend: req => {
                req.setRequestHeader('Authorization', basicAuth('admin', 'password'));
            },
            data: { url: $('#url').val() },
            type: "GET",
            contentType: "application/json;charset=UTF-8"
        }).done(res => {
            console.log(res);
            $('#get').val(res.get);
            $('#set').val(res.set);
            if (res.getTime) $('#getMoment').val((Date.now() - res.getTime) / 1000);
            if (res.setTime) $('#setMoment').val((Date.now() - res.setTime) / 1000);

        }).fail(errorRes => {
            console.error(errorRes);
        });
    }

    function submit() {
        $.ajax({
            url: "http://localhost/s",
            beforeSend: req => {
                req.setRequestHeader('Authorization', basicAuth('admin', 'password'));
            },
            data: $('#url').val(),
            type: "POST",
            contentType: "application/json;charset=UTF-8"
        }).done(res => {
            console.log(res);
            $('#shortened').val(res);

        }).fail(errorRes => {
            console.error(errorRes);
        });
    }

    function basicAuth(user, password) {
        var tok = user + ':' + password;
        var hash = Base64.encode(tok);
        return "Basic " + hash;
    }
</script>